<template>
    <div>
        <el-form label-position="right"
                 label-width="100px"
                 :model="currentCheckedNode">
            <el-form-item label="路由选择"
                          required>
                <el-select v-model="currentCheckedNode.path"
                           placeholder="请选择路由"
                           style="width:100%;"
                           filterable
                           clearable
                           @change="changeRoute">
                    <el-option v-for="item in routersList"
                               :key="item.key"
                               :label="item.title"
                               :value="item.path"
                               :disabled="item.disabled">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="自定义地址"
                          required
                          v-if="currentCheckedNode.path === '/custom-iframe'">
                <el-input v-model="currentCheckedNode.iframeSrc"
                          placeholder="请填写菜单地址"></el-input>
            </el-form-item>
			
			<el-form-item label="打开方式"
			              required
			              v-if="currentCheckedNode.path === '/custom-iframe'">
			    <el-switch
			      style="display: block;line-height: 2;"
			      v-model="currentCheckedNode.openType"
			      active-color="#13ce66"
			      inactive-color="#ff4949"
			      active-text="在浏览器新标签页打开"
			      inactive-text="在内部打开">
			    </el-switch>
			</el-form-item>
            <el-form-item label="组件ID"
                          required
                          v-else-if="currentCheckedNode.path === '/preview/:id'">
                <el-cascader v-model="currentCheckedNode.previewIds"
                             :options="previewMenu"
                             :show-all-levels="false"
                             placeholder="请选择预览页面"
                             :props="{ expandTrigger: 'hover',children: 'children', leaf: 'isLeaf',label:'title',value:'id' }"
                             @change="handleChange" ref="componentsSelector"></el-cascader>
            </el-form-item>
            <el-form-item label="菜单名称"
                          required>
                <el-input v-model="currentCheckedNode.label"
                          placeholder="请填写菜单名称"></el-input>
            </el-form-item>
            <el-form-item label="菜单图标"
                          required>
                <el-input readonly
                          v-model="currentCheckedNode.icon"
                          class="custom-input-prefix"
                          placeholder="请选择菜单图标">
                    <template slot="suffix">
                        <i :class="currentCheckedNode.icon"></i>
                    </template>
                    <template slot="append">
                        <el-button icon="el-icon-setting"
                                   @click="dialogVisible=true"></el-button>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item size="large">
                <el-button type="primary"
                           @click="onSubmit" size="small">提交</el-button>
            </el-form-item>
        </el-form>
        <el-dialog title="请选择菜单图标"
                   :visible.sync="dialogVisible"
                   width="50%"
                   class="custom-dialog"
                   :close-on-click-modal="false"
                   append-to-body>
            <IconView @click-node="(icon) => {
                currentCheckedNode.icon = icon
                dialogVisible = false
            }" />
        </el-dialog>
    </div>
</template>
<script>
import IconView from "./icon-view";
export default {
    components: {
        IconView,
    },
    props: {
        allPaths: {
            type: Array,
            default: function () {
                return [];
            },
        },
        currentCheckedNode: {
            type: Object,
            default: function () {
                return {};
            },
        },
    },
    data() {
        return {
            routersList: [
                {
                    path: "/preview/:id",
                    key: "preview",
                    title: "预览页面",
                    disable: false,
                },
                {
                    path: "/custom-iframe",
                    key: "custom-iframe",
                    title: "自定义iframe地址",
                    disable: false,
                },
                {
                    path: "/system/role-manage",
                    key: "role-manage",
                    title: "角色管理",
                    disable: false,
                },
                {
                    path: "/system/user-manage",
                    key: "user-manage",
                    title: "用户管理",
                    disable: false,
                },
            ],
            dialogVisible: false,
            formLabelAlign: {
                label: "",
                path: "",
                icon: "",
            },
            previewMenu: [],
        };
    },
    methods: {
        changeRoute(key) {
            const curr = this.routersList.find((item) => item.path === key);
            this.currentCheckedNode.label = curr.title;
			if(this.currentCheckedNode.path.includes('custom-iframe')){
				this.currentCheckedNode.openType=false
				delete this.currentCheckedNode.previewIds;
				delete this.currentCheckedNode.previewId;
			}
			
			if(this.currentCheckedNode.path.includes('/preview/:id')){
				delete this.currentCheckedNode.iframeSrc;
			}
        },
        onSubmit() {
            const currentCheckedNode = this.currentCheckedNode;
            const keys = ["/preview/:id", "/custom-iframe"];
            if (currentCheckedNode.path === "/preview/:id") {
                const ids = currentCheckedNode.previewIds;
                const previewId = ids[ids.length - 1] || "";
                currentCheckedNode.previewId = previewId;
                currentCheckedNode.path = "/preview/" + previewId;
            }
            if (!keys.includes(currentCheckedNode.path)) {
                delete currentCheckedNode.iframeSrc;
                delete currentCheckedNode.previewIds;
            }
            this.$emit("on-save", currentCheckedNode);
        },
		handleChange(val){
			this.currentCheckedNode.label=this.$refs.componentsSelector.getCheckedNodes()[0].data.title
		}
    },
    created() {
       
    },
};
</script>
<style lang="scss">
.custom-input-prefix {
    .el-input__prefix,
    .el-input__suffix {
        display: flex;
        align-items: center;
        font-size: 20px;
    }
}
</style>
